<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>基础资料</title>
    <link rel="stylesheet" href="/static/plugs/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/base.css">
    <link rel="stylesheet" href="/static/css/normalize.css">
    <script src="/static/plugs/jquery/jquery-3.1.1.min.js"></script>
    <script src="/static/plugs/bootstrap/jquery.slim.min.js"></script>
    <script src="/static/plugs/bootstrap/bootstrap.bundle.min.js"></script>
    <script src="/initial.js"></script>
    <style>
        .wrap{
            width: 1440px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #F2F2F2;
            /*border: 1px red solid;*/
        }
        .search-header{
            width: 1440px;
            height: 100px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #FFFFFF;
            /*border: 1px red solid;*/
            .search-title-wrap{
                display: flex;
                justify-content: center;
                align-items: center;
                .search-title-icon{
                    width: 48px;
                    height: 48px;
                    background: url("/static/images/logo.png") 100% 100%;
                    background-size: contain;
                    margin-right: 20px;
                }
                .search-title a{
                    color:darkmagenta;
                    font-size: 24px;
                    font-weight: bold;
                }
            }
            .user-wrap{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                .user-img img{
                    width: 48px;
                    height: 48px;
                    border-radius: 50%;
                }
                .username{
                    margin-left: 20px;
                }
            }
        }

        .user-contain{
            width: 1200px;
            height: 900px;
            margin-top: 40px;
            display: flex;
            flex-direction: row;
            background: #F2F2F2;
            /*border: 1px red solid;*/
        }
        .user-left-wrap{
            /*padding-bottom: 20px;*/
            width: 280px;
            margin-right: 20px;
            /*height: 600px;*/
            background: #FFFFFF;
        }

        .user-left-wrap{
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 700px;
            .left-title{
                width: 280px;
                height: 80px;
                font-size: 24px;
                border-bottom: 1px solid rgba(200, 200, 200, 0.5);
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
        .left-nav{
            margin-top: 50px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .nav-item{
            width: 200px;
            height: 80px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            /*border:1px red solid;*/
            .nii-info{
                background: url("/static/images/register-info.png") 100% 100%;
            }
            .nii-job{
                background: url("/static/images/register-job.png") 100% 100%;
            }
            .nii-msg{
                background: url("/static/images/register-msg.png") 100% 100%;
            }
            .nii-mana{
                background: url("/static/images/register-mana.png") 100% 100%;
            }
            .nii-setting{
                background: url("/static/images/register-setting.png") 100% 100%;
            }
            .nii-logout{
                background: url("/static/images/register-logout.png") 100% 100%;
            }
            .nav-item-icon{
                width: 24px;
                height: 24px;
                background-size: contain;
                margin-right: 10px;
            }
            .nav-item-title a{
                font-size: 20px;
                text-decoration: none;
                color: black;
            }
        }
        .user-right-wrap{
            width: 900px;
            display: flex;
            flex-direction: column;
        }
        .user-main{
            width: 900px;
            background: #FFFFFF;

        }
        .main-content-wrap{
            font-size: 20px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding-left: 20px;
            .content-item{
                padding: 10px 0;
                display: flex;
                justify-content: center;
                flex-direction: column;
                .thumb-wrap{
                    width: 96px;
                    height: 96px;
                }
                .thumb-wrap img{
                    width: 96px;
                    height: 96px;
                    border-radius: 50%;
                }
            }
            .thumb-wrap-item{
                width: 880px;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: flex-end;
                margin: 20px 0;
                font-size: 16px;
                color:#8a8a8a;
            }
            .item{
                margin-bottom: 20px;
                display: flex;
                align-items: center;
                #user-school-name{
                    width: 300px;
                    height: 50px;
                    font-size: 16px;
                    border-radius: 5px;
                    border: 0.1pt solid rgba(220, 220, 220, 0.5);
                    padding-left: 20px;
                }
                #user-school-enter{
                    width: 300px;
                    height: 50px;
                    margin-left: 20px;
                    font-size: 16px;
                    border-radius: 5px;
                    border: 0.1pt solid rgba(220, 220, 220, 0.5);
                    padding-left: 20px;
                }
            }
            .user-job-name{
                width: 300px;
                height: 50px;
                margin-left: 20px;
                font-size: 16px;
                border-radius: 5px;
                border: 0.1pt solid rgba(220, 220, 220, 0.5);
                padding-left: 20px;
            }
            .item label{
                width: 150px;
                text-align: right;
            }
            .item #nickname{
                width: 500px;
                height: 50px;
                font-size: 16px;
                border-radius: 5px;
                border: 0.1pt solid rgba(220, 220, 220, 0.5);
                padding-left: 20px;
            }
            .item textarea{
                width: 500px;
                height: 200px;
                font-size: 16px;
                border-radius: 5px;
                border: 0.1pt solid rgba(220, 220, 220, 0.5);
                padding: 20px;
            }
            .icon-plus{
                width: 32px;
                height: 32px;
                background: url("/static/images/plus.png") no-repeat;
                background-size: contain;
                margin-left: 5px;
            }
            .icon-sub{
                width: 32px;
                height: 32px;
                background: url("/static/images/sub.png") no-repeat;
                background-size: contain;
                margin-left: 5px;
            }
            .school-add-item{
                padding-left: 150px;
            }
            .job-add-item{
                padding-left: 130px;
            }
        }
        .save-btn-wrap{
            width: 900px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px 0 50px 0;
        }
        .save-btn-wrap a{
            display: flex;
            justify-content: center;
            align-items: center;
            background: #8B9CAC;
            border-radius: 5px;
            width: 300px;
            height: 50px;
            color:white;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="search-header">
        <div class="search-title-wrap">
            <div class="search-title-icon"></div>
            <div class="search-title"><a href="../index.php">haishuyun</a></div>
        </div>
        <div class="user-wrap">
            <div class="user-img">
                <img src="/static/images/thumb.png" alt="暂无头像">
            </div>
            <div class="username"><a href="main-page.php">用户99887766</a></div>
        </div>
    </div>
    <div class="user-contain">
        <div class="user-left-wrap">
            <div class="left-title">用户中心</div>
            <div class="left-nav">
                <div class="nav-item">
                    <div class="nav-item-icon nii-info"></div>
                    <div class="nav-item-title"><a  href="javascript:void(0)" onclick="toUserNav()">基础资料</a></div>
                </div>
                <div class="nav-item">
                    <div class="nav-item-icon nii-job"></div>
                    <div class="nav-item-title"><a  href="javascript:void(0)" onclick="toUserNav()">我的求职</a></div>
                </div>
                <div class="nav-item">
                    <div class="nav-item-icon nii-msg"></div>
                    <div class="nav-item-title"><a  href="javascript:void(0)" onclick="toUserNav()">我的消息</a></div>
                </div>
                <div class="nav-item">
                    <div class="nav-item-icon nii-mana"></div>
                    <div class="nav-item-title"><a  href="javascript:void(0)" onclick="toUserNav()">企业管理</a></div>
                </div>
                <div class="nav-item">
                    <div class="nav-item-icon nii-setting"></div>
                    <div class="nav-item-title"><a  href="javascript:void(0)" onclick="toUserNav()">企业设置</a></div>
                </div>
                <div class="nav-item">
                    <div class="nav-item-icon nii-logout"></div>
                    <div class="nav-item-title"><a  href="javascript:void(0)" onclick="toUserNav()">退出登录</a></div>
                </div>
            </div>
        </div>
        <div class="user-right-wrap">
            <div class="user-main">

                <div class="main-content-wrap">
                    <div class="content-item">
                        <div class="thumb-wrap-item">
                            <div class="thumb-wrap"><img src="/static/images/thumb.png" alt=""></div>
                            <div>编辑头像</div>
                        </div>
                        <div class="item">
                            <label for="nickname">昵称：</label>
                            <input name="nickname" id="nickname" placeholder="请输入昵称">
                        </div>
                        <div class="item">
                            <label for="user-des">个人说明：</label>
                            <textarea name="user-des" id="user-des" placeholder="请输入个人说明"></textarea>
                        </div>
                        <div class="item school-item">
                            <label for="user-school-name">毕业学校：</label>
                            <input name="user-school-name" id="user-school-name" placeholder="请输入学校名称">
                            <input name="user-school-enter" id="user-school-enter" placeholder="请输入入学年份，如：1982">
                            <div class="icon-plus" onclick="addNewSchool()"></div>
                        </div>

                        <div class="item job-item">
                            <label for="user-school-name">曾就职单位：</label>
                            <input name="user-school-name" id="user-school-name" placeholder="请输入曾就职单位">
                            <div class="icon-plus" onclick="addNewJob()"></div>
                        </div>

                    </div>
                </div>

                <div class="save-btn-wrap"><a href="javascript:void(0)" onclick="saveConfig()">保存设置</a></div>
            </div>
        </div>
    </div>
</div>
</body>
<script>


    //提交认证
    function bindNewEmail(){
        window.location.href="bind-phone-new.php";
    }

    var shcoolSn = 0;
    var jobSn = 0;

    //增加新的学校
    function addNewSchool(){
        let addSchoolHtml = `<div class="item school-add-item school-add-item-${shcoolSn} data-school=${shcoolSn}">
                            <input name="user-school-name" id="user-school-name" placeholder="请输入学校名称">
                            <input name="user-school-enter" id="user-school-enter" placeholder="请输入入学年份，如：1982">
                            <div class="icon-plus" onclick="addNewSchool()"></div>
                            <div class="icon-sub" onclick="subNewSchool(${shcoolSn})" id="subid-${shcoolSn}" class="subid-${shcoolSn}"></div>
                            </div>`;
        shcoolSn++;
        $('.school-item,.school-add-item').filter(':last').after(addSchoolHtml);
    }

    //减少新的学校
    function subNewSchool(shcoolSn){
        $(`#subid-${shcoolSn}`).parent().css('display', 'none');
    }

    //增加新的就职单位
    function addNewJob(){
        let addJobHtml = `<div class="item job-add-item job-add-item-${jobSn} data-job=${jobSn}">
                            <input class="user-job-name" name="user-job-name" id="user-job-name" placeholder="请输入曾就职单位">
                            <div class="icon-plus" onclick="addNewJob()"></div>
                            <div class="icon-sub" onclick="subNewJob(${jobSn})" id="subJobid-${jobSn}" class="subJobid-${jobSn}"></div>
                            </div>`;
        jobSn++;
        $('.job-item,.job-add-item').filter(':last').after(addJobHtml);
    }

    //减少新的就职单位
    function subNewJob(jobSn){
        $(`#subJobid-${jobSn}`).parent().css('display', 'none');
    }

    //保存数据
    function saveConfig(){
        alert('save data');
    }
</script>
</html>